<template>
  <div class="trainer-container">

    <div class="tableBar" style="margin: 10px 55px ">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="教练编号" style="margin: 0 10px">
          <el-input
            v-model="searchObj.id"
            style="width: 120px"
            placeholder="教练编号"
            clearable
            @clear="getTrainerPage"
            @keyup.enter.native="getTrainerPage"
          ></el-input>
        </el-form-item>
        <el-form-item label="教练名字" style="margin: 0 10px">
          <el-input
            v-model="searchObj.trName"
            style="width: 120px"
            placeholder="教练名字"
            clearable
            @clear="getTrainerPage"
            @keyup.enter.native="getTrainerPage"
          ></el-input>
        </el-form-item>
        <el-form-item label="教练电话" style="margin: 0 10px">
          <el-input
            v-model="searchObj.phone"
            style="width: 145px"
            placeholder="教练电话"
            clearable
            @clear="getTrainerPage"
            @keyup.enter.native="getTrainerPage"></el-input>
        </el-form-item>
        <el-form-item label="擅长方向">
          <el-cascader
            clearable
            @clear="getTrainerPage"
            v-model="cascaderList"
            :options="categoryList"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="searchObj">
        <el-form-item label="认证状态" style="margin: 0 10px">
          <el-select
            v-model="searchObj.isIdentify"
            style="width: 155px"
            placeholder="请选择认证状态"
            clearable
            @clear="getTrainerPage"
            @keyup.enter.native="getTrainerPage">
            <el-option label="未认证" value="0"></el-option>
            <el-option label="已认证" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="date2" label="入职时间" style="margin: 0 10px">
          <el-date-picker
            v-model="searchObj.beginTime"
            style="width: 190px"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            clearable
            @change="changeBeginDate">
          </el-date-picker>
          <span> - </span>
          <el-date-picker
            v-model="searchObj.endTime"
            style="width: 190px"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            clearable
            @change="changeEndDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin: 0 10px">
          <el-button type="primary" @click="getTrainerPage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="paginationBar">
      <el-pagination
        style="width: 30% ;margin: 5px auto"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[4, 8, 12,16]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-col
      v-for="( trainer ,index) in trainerList"
      :key="index"
      :span="4"
      style="margin: 10px 45px"
    >
      <el-card :body-style="{ padding: '0px' ,margin:'10px'}" shadow="hover">
        <div class="card-header">
          <el-checkbox :true-label="trainer.id" @change="changeDeleteBatchIds">{{ trainer.id }}</el-checkbox>
          <div class="topButton" style="float: right">
            <el-button
              circle
              size="mini"
              type="info"
              icon="el-icon-info"
              @click="showDetail(trainer.id)">
            </el-button>
            <router-link :to="'/trainer/edit/'+trainer.id">
              <el-button
                icon="el-icon-edit"
                style="margin:  1px 0 0  10px "
                size="mini"
                type="primary"
                circle>
              </el-button>
            </router-link>
            <el-button
              icon="el-icon-delete"
              style="margin: 1px 0 1px 10px "
              size="mini"
              type="danger"
              @click="handleDelete(index, trainer)"
              circle></el-button>
          </div>
        </div>
        <img :src="trainer.avatar" class="image">
        <div style="margin: 10px 0;">
          <b>{{ trainer.trName }}</b>
          <el-tag
            style="float: right"
            :type="trainer.isIdentified === 0 ? 'warning' : 'success'"
            disable-transitions>
            {{ trainer.isIdentified === 0 ? '未认证' : '已认证' }}
          </el-tag>
          <div class="bottom clearfix">
            <span style="font-size: small;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><b>擅长领域:{{
                getExpertiseName(trainer.expertiseList)
              }}</b></span>
            <hr>
            <span style="font-size: small "><b>从业年限:{{ trainer.career }}</b></span>
            <hr>
            <span style="font-size: small "><b>教练电话:{{ trainer.phone }}</b></span>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-dialog
      title="教练信息"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-descriptions
        v-loading="loading"
        :column="2"
        border>
        <el-descriptions-item label="姓名">{{ this.trainer.trName }}</el-descriptions-item>
        <el-descriptions-item label="头像"><img :src="this.trainer.avatar" style="width: 100px"></el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.trainer.phone }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.trainer.gender === 0 ? '女' : '男' }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ this.trainer.age }}</el-descriptions-item>
        <el-descriptions-item label="从业年限">{{ this.trainer.career }}</el-descriptions-item>
        <el-descriptions-item label="入职日期">{{
            this.trainer.joinTime === null ? '-' : this.trainer.joinTime
          }}
        </el-descriptions-item>
        <el-descriptions-item label="生日">{{ this.trainer.birthday }}</el-descriptions-item>
        <el-descriptions-item label="认证状态">
          <el-tag
            :type="trainer.isIdentified === 0 ? 'warning' : 'success'"
            disable-transitions>
            {{ trainer.isIdentified === 0 ? '未认证' : '已认证' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="擅长方向">{{ this.trainer.expertiseList }}</el-descriptions-item>
        <el-descriptions-item label="身份证号" :span="2">{{ this.trainer.idNo }}</el-descriptions-item>
        <el-descriptions-item label="简介">{{ this.trainer.intro }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>


  </div>


</template>

<script>
import trainerAPI from '@/api/trainer'
import categoryAPI from '@/api/category'

export default {
  data() {
    return {

      value: true,
      trainer: {},
      loading: true,
      dialogVisible: false,
      deleteBatchIds: [],
      categoryList: [],
      cascaderList: [],
      total: 0,
      pageSize: 4,
      current: 1,
      searchObj: {},
      trainerList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleCurrentChange(val) {
      this.searchObj.current = val
      this.getTrainerPage()
    },
    handleSizeChange(val) {
      console.log(val)
      this.searchObj.pageSize = val
      this.getTrainerPage()
    },
    init() {
      // 获取教练分页结果
      this.searchObj.pageSize = this.pageSize
      this.searchObj.current = this.current
      this.getTrainerPage()
      // 获取教练擅长方向
      categoryAPI.getCategoryCascader().then(res => {
        this.categoryList = res.data
      })
    },
    showDetail(id) {
      this.dialogVisible = true
      trainerAPI.getTrainerById(id).then(res => {
        this.loading = false
        this.trainer = res.data
        this.trainer.expertiseList = this.getExpertiseName(this.trainer.expertiseList)
      })
    },
    changeDeleteBatchIds(val) {
      this.deleteBatchIds.push(val)
    },
    getExpertiseName(expertiseList) {
      const categoryNameList = []
      expertiseList.forEach(expertise => {
        categoryNameList.push(expertise.categoryName)
      })
      if (categoryNameList.length > 3) {
        return categoryNameList.slice(0, 3).toString() + '等 '
      }
      return categoryNameList.toString()
    },
    getTrainerPage() {
      trainerAPI.getTrainerPage(this.searchObj).then(res => {
        this.trainerList = res.data.records
        this.total = res.data.total
      })
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除该条信息', '删除', {
        distinguishCancelAndClose: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定删除'
      })
        .then(() => {
          trainerAPI.deleteTrainer(row.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
          this.current = 1
          this.getTrainerPage()
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    changeBeginDate(val) {
      this.searchObj.beginTime = val
      this.getTrainerPage()
    },
    changeEndDate(val) {
      this.searchObj.endTime = val
      this.getTrainerPage()
    },
    handleBatchDelete(index, row) {
      if (this.deleteBatchIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '未选择删除对象'
        })
        return
      } else {
        this.$confirm('是否要删除该条信息', '删除', {
          distinguishCancelAndClose: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定删除'
        })
          .then(() => {
            trainerAPI.deleteBatchTrainer(this.deleteBatchIds).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.current = 1
              this.getTrainerPage()
            })
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
      }
    },
    handleChange(val) {
      console.log(val);
      if (val.length === 0) {
        this.getTrainerPage()
      }
      // 使用数组pop特性，将最后id弹出，保证无论多深，弹出的一定是最底层的分类id
      this.searchObj.expertise = val.slice(-1).toString()
      // this.cascaderList.push(this.searchObj.expertise)
      // console.log(this.cascaderList)
      // console.log(this.searchObj.expertise)
    }
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  //width: 200px;
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
